<template>
  <view class="page">
    <button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
    <view>头像：<image :src="head" style="width: 200rpx;height: 200rpx;"></image>
      <view>国家：{{country}}</view>
      <view>省份：{{province}}</view>
      <view>城市：{{city}}</view>
      <view>性别：{{gender == 1?'男': (gender == 2?'女':'')}}</view>
      <view>昵称：{{nickName}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        head: "",
        country: "",
        province: "",
        city: "",
        gender: "",
        nickName: ""
      };
    },
    methods: {
      getUserInfo(e) {
        this.head = e.detail.userInfo.avatarUrl;
        this.country = e.detail.userInfo.country;
        this.province = e.detail.userInfo.province;
        this.city = e.detail.userInfo.city;
        this.gender = e.detail.userInfo.gender;
        this.nickName = e.detail.userInfo.nickName;
      }
    }
  }
</script>

<style lang="scss">
  .page {
    width: 100%;
    height: 100vh;
  }
</style>